<template>
  <q-page class="q-pa-md row">
    <panel-config-view v-if="showPanelEdit" @exit="onPanelEditExit" />
    <video-page-left
      ref="pageLeft"
      v-else
      @onModeChange="onLeftModeChange"
      @edit-panels="onEditPanel"
    />
    <panel-container
      ref="panelContainer"
      class="panel-container col"
      @maxmized="onMaxmized"
      @minimized="onMinimized"
    ></panel-container>
  </q-page>
</template>
<script setup lang="ts">
import { ref, onBeforeMount, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import PanelContainer from 'components/panel/PanelContainer.vue';
import VideoPageLeft from './videoViews/VideoPageLeft.vue';
import PanelConfigView from './videoViews/PanelConfigView.vue';
import { useVideoStore } from 'src/stores/video-store';
import { singularSdk } from 'singular-sdk';
const router = useRouter();
const videoStore = useVideoStore();
const routeName = router.currentRoute.value.name;
const showPanelEdit = ref(false);
const pageLeft = ref();
onBeforeMount(async () => {
  if (routeName === 'Video') {
    const videoId = router.currentRoute.value.params.id as string;
    await videoStore.getVideoAndPlay(videoId);
    singularSdk.event('Video_visit', { videoId: videoId });
  } else if (routeName === 'Audio') {
    const audioId = router.currentRoute.value.params.id as string;
    await videoStore.getAudioAndPlay(audioId);
    singularSdk.event('Video_visit', { audioId: audioId });
  } else if (routeName === 'Playlist') {
    const playlistId = router.currentRoute.value.params.id as string;
    if (playlistId === '0') {
      console.info('get videos from WatchLater');
    } else {
      await videoStore.getPlaylistAndPlay(playlistId);
    }
  }
  console.log(videoStore.currentVideo);
});
onMounted(() => {});
const panelContainer = ref();
const onLeftModeChange = () => {
  if (panelContainer.value) {
    panelContainer.value.doResize();
  }
};
function onEditPanel() {
  showPanelEdit.value = true;
  if (panelContainer.value) {
    panelContainer.value.doResize();
  }
}
function onPanelEditExit() {
  showPanelEdit.value = false;
  if (panelContainer.value) {
    panelContainer.value.doResize();
  }
}
function onMaxmized() {
  if (pageLeft.value) pageLeft.value.miniMode();
}
function onMinimized() {
  if (pageLeft.value) pageLeft.value.fullMode();
}
</script>
